<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2>岗位：{{person.job.type}}</h2>
  <h2>薪资：{{person.job.salary}}</h2>
  <h2>爱好：{{person.hobby}}</h2>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import { reactive } from 'vue'
export default {
  name: 'App',
  // 初试setup，暂时不考虑响应式
  setup() {
    // 数据
    let person = reactive({
      name : '张三',
      age: 18,
      job: {
        type: '前端工程师',
        salary: '10k'
      },
      hobby: ['抽烟','喝酒','烫头']
    })

    // 方法
    function changeInfo(){
      person.name = '李四'
      person.age = 22
      person.job.type = '后端工程师'
      person.job.salary = '20k'
      // 在vue2 数组的改变不能通过下标来监测
      person.hobby[0] = '学习'
    }

    // 返回一个对象
    return {
      person,
      changeInfo
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
